<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  isIcon: {
    type: Boolean,
    default: true
  },
  contentArr: {
    type: Array,
    default: () => []
  },
  pointColor: {
    type: String,
    default: '#7eabff'
  }
})
</script>
<template>
  <div class="aside-item">
    <div class="icon-title">
      <div class="left" v-if="isIcon">
        <slot name="titleIcon">
          <div class="icon-default">
            <icon-title></icon-title>
          </div>
        </slot>
      </div>
      <div class="center">
        <div class="title">{{ title }}</div>
      </div>
      <div class="right">
        <span>全部</span>
        <el-icon color="#4490f1"><ArrowRight /></el-icon>
      </div>
    </div>
    <!-- content -->
    <div class="aside-content">
      <slot name="ContentList">
        <ul class="list">
          <li v-for="(item, index) in contentArr" :key="index" class="v-link">
            <icon-point :style="`color:${pointColor} `"></icon-point>
            <span class="text">{{ item }}</span>
          </li>
        </ul>
      </slot>
    </div>
  </div>
</template>
<style scoped lang="less">
.aside-item {
  margin-bottom: 20px;

  .icon-title {
    display: flex;
    align-items: center;
    justify-content: center;
    .left {
      .icon-default {
        color: var(--primary-color);
        .icon {
          color: inherit;
        }
      }
    }
    .center {
      flex: 1;
      .title {
        letter-spacing: 1px;
        font-weight: 700;
        color: #333;
        font-size: 16px;
        padding: 0 10px;
      }
    }
    .right {
      width: 50px;
      color: var(--text-sub-color);
      display: flex;
      align-items: center;
      cursor: pointer;
      .icon {
        color: var(--primary-color);
      }
    }
  }
  .aside-content {
    padding: 10px;
    ul.list {
      width: 100%;

      li {
        width: 100%;
        line-height: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #333;

        &:hover {
          color: var(--text-hover-color);
        }
        .icon {
          width: 16px;
          height: 16px;
          color: var(--point--default-color);
        }
        .text {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
